<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	
<!-- @authority侯仁杰 
	医生登录管理系统-->
	
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lock Screen Page</title>
<link rel="shortcut icon" href="img/favicon.ico">

<link
	href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,300,100,700"
	rel="stylesheet">
<link
	href="http://fonts.googleapis.com/css?family=Roboto:500,400italic,100,700italic,300,700,500italic,400"
	rel="stylesheet">
<!--Bootstrap Stylesheet [ REQUIRED ]-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--Jasmine Stylesheet [ REQUIRED ]-->
<link href="css/style.css" rel="stylesheet">
<!--Font Awesome [ OPTIONAL ]-->
<link href="plugins/font-awesome/css/font-awesome.min.css"
	rel="stylesheet">
<!--Switchery [ OPTIONAL ]-->
<link href="plugins/switchery/switchery.min.css" rel="stylesheet">
<!--Bootstrap Select [ OPTIONAL ]-->
<link href="plugins/bootstrap-select/bootstrap-select.min.css"
	rel="stylesheet">
<!--Demo [ DEMONSTRATION ]-->
<link href="css/demo/jasmine.css" rel="stylesheet">
<!--SCRIPT-->
<!--=================================================-->
<!--Page Load Progress Bar [ OPTIONAL ]-->
<link href="plugins/pace/pace.min.css" rel="stylesheet">
<style type="text/css">  
.pass-button-verifyCodeSend{
    			display: inline-block;  /*设置元素的显示方式依然是内联元素,但是拥有块的特性,可以设置宽度高度等等*/
    			width: 126px;
    			height: 40px;
			    border-radius: 4px;
			    background: #fff;
			    border: 1px solid #E0E0E0;
			    font-size: 12px;
			    color: #333;
			    letter-spacing: 0;
			    text-align: center;
			    line-height: 24px;
    		}
.pass-button-verifyCodeSend:hover {
			    color: #2E58FF;
			    border: 1px solid #2E58FF;
			    background: #fff;
			}

.col-xs-12{
position: relative;
			    min-height: 1px;
			    padding-right: 15px;
			    padding-left: 15px;
}			
.code{
				position: relative;
			    min-height: 1px;
			    padding-right: 250px;
			    padding-left: 15px;
			} 
</style>  
<script src="plugins/pace/pace.min.js"></script>
</head>

<body>
   <div id="container" class="cls-container">
		<!-- Start Lock Screen  -->
		<!--===================================================-->
		<div class="lock-wrapper">
			<div class="panel lock-box">
			<!-- 头像浏览 -->
				<div class="center">
					<img src="img/av1.png" id="img3" />
				</div>
				<h4>医生管理系统</h4>
				<p class="text-center">欢迎登录</p>
				<!-- 切换登录方式 -->
				<div class="row">
                       <div class="col-xs-6 col-sm-6 col-md-6">
                            <a class="btn btn-lg btn-primary btn-block" id="userlogin">姓名登录</a>
                       </div>
                       <div class="col-xs-6 col-sm-6 col-md-6">
                            <a class="btn btn-lg btn-info btn-block" id="phonelogin">手机号登录</a>
                       </div>
                </div>
                <br/>
				<div class="row">
				      <form action="" class="form-inline" id="login-form">
				      <input type="hidden" name="op" value="getUserName">
						<div class="form-group col-md-12 col-sm-12 col-xs-12">
							<div class="text-left">
								<label for="inputUsername" class="text-muted">真实姓名</label>
								<input id="inputUsername" name="inputUsername" type="text" placeholder="真实姓名" class="form-control lock-input" required />
							</div>
                            <div class="text-left">
								<label for="signupInputPassword" class="text-muted">密码</label>
								<input id="signupInputPassword" name="signupInputPassword" type="password" placeholder="密码" class="form-control lock-input" required />
							</div>
							<div class="" style="margin-right:50px;width: 50px;">
								<input type="checkbox" id="checked" value="on" style="height: 20px;width: 20px;margin-right:10px;" id="checkbox" />
							</div>
							<p style="margin-left:10px;height:20px;text-align:left">记住密码</p>
						 </div>
						<!--手机号登录页面 -->
						 <!-- <div id="loginBox">
					    	<div class="login-changeTab">
					        		<div class="login-register-box">
					            		<div class="login-register clearfix">
					                		<div class="register-button" align="center">短信验证码登录</div>
					            		</div>
					            		<div class="register-content">
					                		<div class="registerUsernameBox">
					                    		<input type="tel" class="Rusername"  maxlength="11" placeholder="请输入手机号" regex="^[1][3,4,5,7,8][0-9]{9}$"/>
					                    		<span></span>
					                		</div>
					                		<div class="registerPassword">
					                    		<input type="number" class="phone" maxlength="6" placeholder="请输机验证码"/>
					                    		<br />
												<input type="button" id="getNum" value="获取验证码">
					                    		<span></span>
					                		</div>
					            		</div>
					        		</div>
					    		</div>
						</div> -->
                        </form>
                        <span id="code"></span>
                        <button type="submit" class="btn btn-block btn-primary" id="userLogin">登录</button>
				</div>
			</div>
		</div>
	</div>

	<!--jQuery [ REQUIRED ]-->
	<script src="js/jquery-2.1.1.min.js"></script>
	<!--BootstrapJS [ RECOMMENDED ]-->
	<script src="js/bootstrap.min.js"></script>
	<!--Fast Click [ OPTIONAL ]-->
	<script src="plugins/fast-click/fastclick.min.js"></script>
	<!--Switchery [ OPTIONAL ]-->
	<script src="plugins/switchery/switchery.min.js"></script>
	<!--Bootstrap Select [ OPTIONAL ]-->
	<script src="plugins/bootstrap-select/bootstrap-select.min.js"></script>
	<script type="text/javascript">
	
	$(function(){
		var loginType = 1;
		localStorage.getItem("rem");
		var username = localStorage.getItem("username");
		var userPassword = localStorage.getItem("userPassword");
		$("#inputUsername").val(username);
		$("#signupInputPassword").val(userPassword);
		//手机验证登录页面
		$("#phonelogin").click(function(){
			loginType = 2;
			var content= "";
			content +=  "<div class=\"form-group col-md-12 col-sm-12 col-xs-12\">"+
			            "<label for=\"inputUsername\" class=\"text-muted\">手机号码</label>"+
			            "<input id=\"getPhoneNum\" name=\"phoneNum\" type=\"tel\" class=\"form-control lock-input\" maxlength=\"11\" placeholder=\"请输入手机号\" /></div>"+
			            "<div class=\"text-left\">"+
			            "<div class=\"code\">"+
			            "<input id=\"verificationCode\" type=\"code\" maxlength=\"6\" placeholder=\"请输入验证码\" class=\"form-control lock-input\"/>"+
			            "<input type=\"button\" id=\"getNum\" name=\"getNum\" value=\"获取验证码\" class=\"pass-button-verifyCodeSend\" /></div>"+
			            "</div>"
			$(".form-inline").html(content);
		})
		//账号密码登录页面
		$("#userlogin").click(function(){
			loginType = 1;
			var content= "";
			content +=  "<div class=\"form-group col-md-12 col-sm-12 col-xs-12\">"+
			            "<div class=\"text-left\">"+
			            "<label for=\"inputUsername\" class=\"text-muted\">真实姓名</label>"+
			            "<input id=\"inputUsername\" name=\"inputUsername\" type=\"text\" placeholder=\"真实姓名\" class=\"form-control lock-input\" required /></div>"+
                        "<div class=\"text-left\">"+
			            "<label for=\"signupInputPassword\" class=\"text-muted\">密码</label>"+
			            "<input id=\"signupInputPassword\" name=\"signupInputPassword\" type=\"password\" placeholder=\"密码\" class=\"form-control lock-input\" required /></div>"+
			            "<div class=\"\" style=\"margin-right:50px;width: 50px\">"+
						"<input type=\"checkbox\" id=\"checked\" value=\"on\" style=\"height: 20px;width: 20px;margin-right:10px;\" id=\"checkbox\" /></div>"+
					    "<p style=\"margin-left:10px;height:20px;text-align:left\">记住密码</p></div>"
					    //"<button type=\"submit\" class=\"btn btn-block btn-primary\" id=\"userLogin\">登录</button>"
	      $(".form-inline").html(content); 
		})
		
		// 1、点击获取验证码，请求接口，发给用户验证码
		$(document).on("click","#getNum",function(){
			//验证码时间倒计时
			var InterValObj; //timer变量，控制时间
			var count = 60; //间隔函数，1秒执行
			var curCount;//当前剩余秒数
			//console.log(1)
			curCount = count;
			$("#getNum").attr("disabled", "true");
		    $("#getNum").val(curCount + "秒后可重新发送");
			InterValObj = window.setInterval(SetRemainTime, 1000);
			function SetRemainTime() {
				if (curCount == 0) {
					window.clearInterval(InterValObj);//停止计时器
					$("#getNum").removeAttr("disabled");//启用按钮
					$("#getNum").val("重新发送验证码");
				} else {
					curCount--;
					$("#getNum").val(curCount + "秒后可重新发送");
				}
			}
			//隐藏验证码
			$("#code").hide();
			// 2、获取用户的手机号
			var phoneNum = $("#getPhoneNum").val();
			// 2.7 要符合手机号的标准才能向用户的手机号发送验证码
			if(!(/^[1][3,4,5,7,8][0-9]{9}$/.test(phoneNum))){
				alert("请输入正确手机号");
			}else{
				$.ajax({
					url : "${pageContext.request.contextPath}/Doctor",  //发送请求 
					type : "get",
					data : {
						op : "phone",
						phoneNum:$("#getPhoneNum").val()
					},
					success : function(result) {
					if("noExist"==result){
						alert("暂无该手机号信息,请联系管理员注册");
					}else{
						//sms = result;
						$("#code").text(result);
						 }
					},
					error : function(){
						alert("异步请求失败！")
					}
				});
			}
		});
	$("#userLogin").click(function() {
		if(loginType == 2){
			var code = $("#verificationCode").val();
			if (code == "") { 
				alert("请输入验证码");
			}else if($("#code").text() == code){
				var phoneNum = $("#getPhoneNum").val();
				sessionStorage.setItem("phone", phoneNum);
				window.location.href = "doctor-home.jsp";
				
				} else {
				alert("验证码错误");
			}
		}else if(loginType == 1){
			var userName = $("#inputUsername").val();
			var userPassword = $("#signupInputPassword").val();
			if(userName.trim().length == 0 || userPassword.trim().length == 0){
				alert("用户名或密码不能为空");
			}else{
			//var formData = $("#login-form").serialize();
			$.ajax({
				async:true,
				url : "${pageContext.request.contextPath}/Doctor",
				type : "POST",
				data : {
					op:"getUserName",
					userName:userName,
					userPassword:userPassword
				},
				dataType:"json",
				success:function(result){// 登录用户信息
					if(result == "fail"){
    					alert("真实姓名或密码错误");
					}else{
						if($("#checked").prop("checked") == true){
						localStorage.setItem("username", userName);
						localStorage.setItem("userPassword", userPassword);
						localStorage.setItem("rem", "true");
						window.location.href = "doctor-home.jsp";
						}else{
						localStorage.removeItem("rem");
						localStorage.removeItem("userPassword");	
						window.location.href = "doctor-home.jsp";
						}
					     }
				},
	       })
			     }
		                          }
		})
	});
	
		
		

	</script>
</body>
</html>